<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <br>
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!--  展示从Vuex中的数据-->
    <h2>展示从Vuex中的数据</h2>
    <span>{{username}}---{{age}}</span>
    <hr>
    <h2>修改Vuex的数据</h2>
    <input v-model="val" placeholder="请修改"><button @click="update">修改</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

//导入mapState对象
//{mapState}是，从vuex中导出mapState这一个对象来使用
//不加{}的话就是将整个Vuex当做对象，在这里不对
import  {mapState} from "vuex";

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data() {
    return {
      //date从vuex中取的方式
      //可以使用但不建议在data使用，建议在计算属性里使用
      //固定写法 this.$store.state0
      // username:this.$store.state.username,
      // age:this.$store.state.age,
      val:''
    }
  },
  //建议在计算属性里使用
  //第一种取vuex值
//   computed:{
//     username(){
//      return  this.$store.state.username
//     },
//     age(){
//       return  this.$store.state.age
//     }
//   }
// }

//第二种使用mapState简化取值
// computed:mapState({
// username:function (state){
//   return state.username
// },
//   age:function (state){
//   return state.age
//   }
// })

//V3,如何要取出的变量名,与暴露出去给{{}}中的变量名一样的话,可以再简化
  computed: mapState(['username', 'age']),
  methods:{
    update(){
      this.$store.commit("updateName",this.val)
    }
  }
}
</script>
